<template>
    <div class="app-container">
        <LitigationApplicationOrder :info="form" />
        <LitigationApplicationLitigation :info="form"/>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>撤销信息</span>
                <span></span>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="撤销诉讼原因" prop="revokeReason">
                            <el-input v-model="form.revokeReason" type="textarea" maxlength="200"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件上传" prop="revokeFile">
                            <ImageCommon  :up-type="2" info="选择附件" :limit="20"
                                v-model="form.revokeFile"></ImageCommon>
                        </el-form-item>
                    </el-col>
                </el-row> 
            </el-form>    
        </div>
        <div class="card-wrap flex justify-end card-padding">
                <el-button @click="cancel">取消</el-button>
                <el-button  type="primary" @click="submitForm">提交</el-button>
            </div>
    </div>
</template>

<script>
import LitigationApplicationLitigation from '@/views/collectionManagement/litigationApplication/compoent/litigation.vue'
import LitigationApplicationOrder from '@/views/collectionManagement/litigationApplication/compoent/order.vue'
import * as apis from "@/api/collectionManagement/litigationApplication.js";
export default {
    name: "Revoke",
    components: {LitigationApplicationOrder,LitigationApplicationLitigation},
    dicts: [ 'progress_litigation'],
    data() {
        return {
            form:{
                id:'',
                lessorId:'',
                lessorName:'',
                revokeReason:"",
                revokeFile:'',
            },
            rules:{
                revokeReason:[
                    { required: true, message: '请输入撤销诉讼原因', trigger: 'blur' },
                    { min: 0, max: 200, message: '长度小于200个字符', trigger: 'blur' }
                ]
            },
            id:'',
        };
    },
    async created(){
        this.id = this.$route.query.id
        this.getList()
    },
    methods: {
        getList(){
            apis.redoLitigationInfo(this.id).then((res)=>{
                if(res.code==200){
                    this.form = res.data
                }
                
            })
        },
        // 预览图片
        previewImage(urls) {
            this._previewImages(urls);
        },
        submitForm(){
            const loading = this.$loading({
                lock: true,
                text: '保存中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            let param = {
                id:this.form?.id,
                lessorId:this.form?.lessorId,
                lessorName:this.form?.lessorName,
                revokeReason:this.form?.revokeReason,
                revokeFile:this.form?.revokeFile,
                flowId:this.form?.flowId
            }
            apis.submitRevokeApplication(param).then((res)=>{
                if(res.code==200){
                    loading.close()
                    this.$message.success('提交成功')
                    const view = {path:'/CollectionManagement/Revoke',name:'Revoke'}
                        this.$tab.closePage(view).then(({ visitedViews }) => {
                            this.$router.push({name:"LitigationApplication"})
                        })
                }
            }).catch(()=>{
                loading.close()
            })
            
        },
        cancel(){
            this.$router.push({name:'LitigationApplication'})
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
</style>
